<template>
  <div>
    地形： <a-switch v-model:checked="checked" @change="handleChange" />
  </div>
  <div>
    <a-button @click="handelPromiseStartDraw('Point')">promise-开始绘制点</a-button>
    <a-button @click="handelPromiseEndDraw('Point')">promise-结束绘制点</a-button>
    <a-button @click="handelStartDraw('Point')">异步-开始绘制点（局部参数创建自定义实体）</a-button>
    <a-button @click="handelEndDraw('Point')">异步-结束绘制点</a-button>
    <a-button @click="handelRemoveDraw('Point')">清除当前绘制点</a-button>
    <a-button @click="handelRemoveAllDraw('Point')">清除所有绘制点</a-button>
    <a-button @click="handelGetDraw('Point')">获取最近一次绘制点entity</a-button>
    <a-button @click="handelGetAllDraw('Point')">获取全部点entity</a-button>
  </div>
  <div>
    <a-button @click="handelPromiseStartDraw('Polyline')">promise-开始绘制线</a-button>
    <a-button @click="handelPromiseEndDraw('Polyline')">promise-结束绘制线</a-button>
    <a-button @click="handelStartDraw('Polyline')">异步-开始绘制线（局部参数创建自定义实体）</a-button>
    <a-button @click="handelEndDraw('Polyline')">异步-结束绘制线</a-button>
    <a-button @click="handelRemoveDraw('Polyline')">清除当前绘制线</a-button>
    <a-button @click="handelRemoveAllDraw('Polyline')">清除所有绘制线</a-button>
    <a-button @click="handelGetDraw('Polyline')">获取最近一次绘制点entity</a-button>
    <a-button @click="handelGetAllDraw('Polyline')">获取全部点entity</a-button>
  </div>
  <div>
    <a-button @click="handelPromiseStartDraw('Polygon')">promise-开始绘制多边形</a-button>
    <a-button @click="handelPromiseEndDraw('Polygon')">promise-结束绘制多边形</a-button>
    <a-button @click="handelStartDraw('Polygon')">异步-开始绘制多边形（局部参数创建自定义实体）</a-button>
    <a-button @click="handelEndDraw('Polygon')">异步-结束绘制多边形</a-button>
    <a-button @click="handelRemoveDraw('Polygon')">清除当前绘制多边形</a-button>
    <a-button @click="handelRemoveAllDraw('Polygon')">清除所有绘制多边形</a-button>
    <a-button @click="handelGetDraw('Polygon')">获取最近一次绘制多边形entity</a-button>
    <a-button @click="handelGetAllDraw('Polygon')">获取全部多边形entity</a-button>
  </div>



  <!-- <a-button @click="handelStartDraw('PointHeight')">开始测量高程</a-button>
  <a-button @click="handelEndDraw('PointHeight')">结束测量高程</a-button>
  <a-button @click="handelRemoveDraw('PointHeight')">清除测量高程</a-button>
  <a-button @click="handelGetDraw('PointHeight')">获取高程entity</a-button> -->


  <!-- 
  <a-button @click="handelStartDraw('Polygon')">开始绘制多边形</a-button>
  <a-button @click="handelEndDraw('Polygon')">结束绘制多边形</a-button>
  <a-button @click="handelRemoveDraw('Polygon')">清除绘制多边形</a-button>
  <a-button @click="handelGetDraw('Polygon')">获取多边形entity</a-button>

  <a-button @click="handelStartDraw('Rectangle')">开始绘制矩形</a-button>
  <a-button @click="handelEndDraw('Rectangle')">结束绘制矩形</a-button>
  <a-button @click="handelRemoveDraw('Rectangle')">清除绘制矩形</a-button>
  <a-button @click="handelGetDraw('Rectangle')">获取矩形entity</a-button>

  <a-button @click="handelStartDraw('Circle')">开始绘制圆形</a-button>
  <a-button @click="handelEndDraw('Circle')">结束绘制圆形</a-button>
  <a-button @click="handelRemoveDraw('Circle')">清除绘制圆形</a-button>
  <a-button @click="handelGetDraw('Circle')">获取圆entity</a-button> -->
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
import CesiumTool from '@/utils/newCesiumTool2/CesiumTool.js'
import { reactive } from "vue";

const checked = ref(false)
const cesiumObj = {
  viewer: null,
  cesiumDraw: null
}

let terrainProvider
onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  cesiumObj.viewer = viewer
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";


  /** 控制台显示 所有绘制类型 */
  CesiumTool.CesiumDraw.getType()

  /** 实例化绘制类 */
  // 全局配置项
  const globalConfig = {
    /** 绘制配置 */
    measure: false, // 可选， 是否测量
    createPointEntity: null, //可选， (世界坐标)=> PointEntity
    createLabelEntity: null, //可选， (世界坐标)=> LabelEntity
    promiseDrawStopResolve: true, // 可选，在调用 startDrawPromise 的情况下，中断Promise 是以 resolve 还是 reject 的方式中断，默认 resolve 方式中断

    /** 私有全局配置 */
    tipDomId: '', // 可选，提示的DOM,

    // onStateChange 可选，监听绘制状态 （当前绘制状态）=>
    onStateChange: (flag) => {
      console.log('全局配置项：监听绘制状态', flag)
    },
  }
  cesiumObj.cesiumDraw = new CesiumTool.CesiumDraw(viewer, globalConfig)
  console.log('绘制封装实例化完成： cesiumObj.cesiumDraw ', cesiumObj.cesiumDraw)

});


/** promise 开始绘制 */
function handelPromiseStartDraw(type) {
  const config = {
    measure: true, // 可选， 是否测量
    createPointEntity: null, //可选， (世界坐标)=> PointEntity
    createLabelEntity: null, //可选， (世界坐标)=> LabelEntity
    promiseDrawStopResolve: false, // 可选，在调用 startDrawPromise 的情况下，中断Promise 是以 resolve 还是 reject 的方式中断，默认 resolve 方式中断
  }
  cesiumObj.cesiumDraw.startDrawPromise(type, config).then((res) => {
    console.log('绘制完成', res)
  })

}
/** promise 结束绘制 */
function handelPromiseEndDraw(type) {
  cesiumObj.cesiumDraw.endDrawPromise(type).then(res => {
    console.log('手动中断绘制完成', res)
  })
}

/** 异步：开始 */
function handelStartDraw(type) {
  /** 局部配置项 */
  const config = {
    /** 可选， 是否测量 */
    measure: true,
    /** createPointEntity 可选， (世界坐标)=> PointEntity  */
    createPointEntity: null,
    /** createLabelEntity 可选， (世界坐标)=> LabelEntity */
    createLabelEntity: (cartesian) => {
      const posList = CesiumTool.CesiumCoord.cartesian3ToLonLatHeight(cartesian, 4); // 世界坐标转化为经纬度坐标
      const entity = new Cesium.Entity({
        position: cartesian, // 世界坐标
        label: {
          text: `自定义实体：经度：${posList[0]},纬度：${posList[1]}`,
          font: '20px',
          color: Cesium.Color.RED,
          pixelOffset: new Cesium.Cartesian2(0, -20),
          fillColor: Cesium.Color.YELLOW,
          showBackground: true,
          backgroundColor: Cesium.Color.RED,
        },
      });
      return entity
    },
  }
  cesiumObj.cesiumDraw.startDraw(type, config)
}
/** 异步：结束 */
function handelEndDraw(type) {
  cesiumObj.cesiumDraw.endDraw(type);
}

/** 清空全部绘制 */
function handelRemoveDraw(type) {
  cesiumObj.cesiumDraw.removeDraw(type);
}
/** 清空全部绘制 */
function handelRemoveAllDraw(type) {
  cesiumObj.cesiumDraw.removeAllDraw(type);
}

/** 获取全部实体 */
function handelGetDraw(type) {
  const entities = cesiumObj.cesiumDraw.getDraw(type);
  console.log(`获取${type}当次绘制实体`, entities);
}

/** 获取全部实体 */
function handelGetAllDraw(type) {
  const entities = cesiumObj.cesiumDraw.getAllDraw(type);
  console.log(`获取${type}所有实体`, entities);
}












async function handleChange(flag) {
  if (!terrainProvider) {
    // 资产地形
    terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(1);
  }
  if (flag) {
    cesiumObj.viewer.terrainProvider = terrainProvider; // 使用地形
  } else {
    cesiumObj.viewer.terrainProvider = null; // 使用地形
  }
  console.log(flag)
}


</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
